<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 创建MutationobServer实例, 需要向MutationObserver构造函数中传入回调函数
        const mutationObserver = new MutationObserver(() => {
            console.log('dom was mutation')
        })

        /**
         * 新创建的mutationobserver实例不会关联任何DOM部分, 要使用server('要观察的DOM节点', 'mutationobserverinit对象')
         * 
         * mutationobserverinit对象用于控制观察那些方面的变化
        */
       
        // 创建一个observer并配置他的body元素上属性的变化
        const observer = new MutationObserver(() => {
            console.log('<body> attributes changed')
        })

        const observer1 = new MutationObserver(() => {
            console.log('<body> childlist changed')
        })

        observer.observe(document.body, {attributes: true})
        observer1.observe(document.body, {childList: true})

        document.body.setAttribute('className', 'bodyName')  // <body> attributes changed

        const div = document.createElement('div')

        document.body.appendChild(div)
    </script>
</body>
</html>